<template>
    <view class="globe_back">
        <view class="box">
            <!-- 使用年限 -->
            <u-picker :show="yearShow" :columns="year" @confirm="yearConfirm" @cancel="yearCancel"></u-picker>
            <!-- 车辆品牌 -->
            <u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="Cancel"></u-picker>
            <view class="back_fff br_24 p_24 f_28">
                <view class="flex">
                    <view class="title">车牌号</view>
                    <view class="line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写车辆车牌号" />
                    </view>
                </view>
                <view class="flex">
                    <view class="title">车架号</view>
                    <view class="line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写车辆车架号" />
                    </view>
                </view>
                <view class="flex mt_24">
                    <view class="title">使用年限</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" @click="yearShow = true" style="width: 75%">
                        <input type="text" placeholder="请选择车辆使用年限" v-model="formData.type" />
                        <image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
                    </view>
                </view>
                <view class="flex mt_24">
                    <view class="title">车辆品牌</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" @click="show = true" style="width: 75%">
                        <input type="text" placeholder="请选择车辆品牌" v-model="formData.type" />
                        <image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
                    </view>
                </view>
            </view>
            <!-- 商品图片 -->
            <view>
                <view class="back_fff br_16 p_32 m_16 mt_32">
                    <view class="flex">
                        <view class="from-title-box title">
                            <text class="f_28 cl_333A47">商品图片</text>
                        </view>
                        <view class="imm_imgbox">
                            <view style="display: inline-block" @click="handleUpload('logo')">
                                <image class="img_140" :src="$lz.cdn(formData.logo, 3, 'imgs/updata-img.png', 1)" mode="widthFix"></image>
                            </view>
                            <view class="f_20 cl_999CA3">建议上传尺寸为1:1的图片</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 销售价格 -->
            <u-picker :show="selaShow" :columns="sela" @confirm="selaconfirm" @cancel="selaCanel"></u-picker>
            <view class="back_fff br_24 p_24 f_28 mt_24">
                <view class="flex pt_24">
                    <view class="title">日租价格</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写日租价格" />
                        元
                    </view>
                </view>
                <view class="flex pt_24">
                    <view class="title">月租价格</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写月租价格" />
                        元
                    </view>
                </view>
                <view class="flex pt_24">
                    <view class="title">租车押金</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写租车押金" />
                        元
                    </view>
                </view>
                <view class="flex pt_24">
                    <view class="title">商品库存</view>
                    <view class="line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" placeholder="请填写商品库存" />
                    </view>
                </view>
                <view class="flex pt_24">
                    <view class="title">商品状态</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" @click="selaShow = true" style="width: 75%">
                        <input type="text" placeholder="请选择商品状态" v-model="formData.selatype" />
                        <image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="addBtn back_3377FF br_24 cl_fff mt_24">保存</view>
        <view style="height: 20px"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            url: '',
            show: false,
            selaShow: false,
            yearShow: false,
            columns: [['雅迪', '小牛', '艾玛']],
            year: [['1年', '2年']],
            formData: {
                type: '',
                classA: '',
                year: ''
            }
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    methods: {
        confirm(e) {
            this.formData.type = e.value[0];
            this.show = false;
        },
        Cancel() {
            this.show = false;
        },
        yearConfirm(e) {
            this.formData.year = e.value[0];
            this.yearShow = false;
        },
        yearCancel() {
            this.yearShow = false;
        },
        selaconfirm(e) {
            this.formData.selatype = e.value[0];
            this.selaShow = false;
        },
        selaCanel() {
            this.selaShow = false;
        },
        // 商品图片
        handleUpload(field) {
            let that = this;
            uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],
                sizeType: ['original', 'compressed'],
                success: (chooseImageRes) => {
                    console.log('chooseImageRes', chooseImageRes);
                    const path = chooseImageRes.tempFilePaths[0];
                    upload(path, 'image').then(({ data }) => {
                        const { hash } = data.data;
                        that.formData[field] = hash;
                    });
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
.addBtn {
    width: 686rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 24px auto;
}
.box {
    padding: 32rpx;
    .title {
        width: 148rpx;
    }
    .ClassA {
        background: #3377ff;
        border-radius: 16rpx 16rpx 0 0;
        color: white;
        padding: 24rpx;
    }
    .ClassB {
        background: rgba(51, 119, 255, 0.7);
        color: white;
        padding: 24rpx;
    }
    .guigImg {
        width: 140rpx;
        height: 140rpx;
        border-radius: 16rpx;
    }
    .info {
        padding: 8rpx 0;
    }
}
.nameTitle {
    text-align: center;
}

.name {
    width: 574rpx;
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 24rpx;
    margin-top: 10px;
}

.nameBtn {
    width: 298rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    display: inline-block;
    margin-top: 64rpx;
}
</style>
